// 实现使用函数调用xtx-message组件的逻辑
// 这个函数将来:导入直接使用，也可以挂载在vue实例原型上
// import Message from 'Message.js′  使用   Message({type: 'error' ,text: '提示文字'})
// this.$message({type: 'error', text: '提示文字'})

import XtxMessage from './xtx-message'
import { createVNode, render } from 'vue'

// 在外面准备容器，就不需要每调用一次创建一个容器
const div = document.createElement('div')
// 定义一个class，来方便找到改容器，等于给个名字
div.setAttribute('class', 'xtx-message-container')
// 追加到body上
document.body.appendChild(div)

// 设置定时器标识
let timer = null

export default ({ type, text }) => {
  // 渲染组件
  // 1．导入消息提示组件
  // 2．将消息提示组件编译为虚拟节点(组件不是html css,是单文件语法模板)
  // createVNode(组件，属性对象(props))
  const vnode = createVNode(XtxMessage, { type, text })
  // 3．准备一个装载消息提示组件的DOM容器
  // 4. 将虚拟节点渲染虚拟dom中
  // render(虚拟节点，DOM容器)
  render(vnode, div)
  // 5. 三秒后清除定时器
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, 2000)
}